<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>注册</title>
    <link rel="stylesheet" th:href="@{/css/lib/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/toastr/toastr.min.css}">
    <link rel="stylesheet" th:href="@{/css/app.css}">

    <script type="text/javascript" th:src="@{/js/lib/jquery-2.1.4.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/lib/bootstrap.min.js}"></script>
    <script type="text/javascript" th:src="@{/toastr/toastr.min.js}"></script>

</head>
<body>
<div class="container-fluid">
    <div class="login-register-tabs">
        <div class="app-font" style="font-weight: bold;">注册界面</div>
    </div>

    <div id="login-container" class="login-register-container">
        <form class="form-horizontal" th:action="@{/register}"  method="post">

            <div class="form-group">
                <label for="userId">用户名(必填)</label>
                <input type="text" class="form-control" id="userId" name="userId"
                       th:value="${null == userParam ? '' : userParam.userId}" placeholder="请输入用户名">
            </div>
            <div class="form-group">
                <label for="phone">手机号码(必填)</label>
                <input type="text" class="form-control" id="phone" name="phone"
                       th:value="${null == userParam ? '' : userParam.phone}" placeholder="请输入手机号码">
            </div>

            <div class="form-group">
                <label for="loginPassword">登录密码</label>
                <input type="password" class="form-control" id="loginPassword" name="loginPassword"
                       th:value="${null == userParam ? '' : userParam.loginPassword}" placeholder="请输入登录密码">
            </div>
            <div class="form-group">
                <label for="reLoginPassword">确认登录密码</label>
                <input type="password" class="form-control" id="reLoginPassword" name="reLoginPassword" placeholder="请再次输入登录密码">
            </div>

            <button class="btn btn-warning btn-lg btn-block" type="submit">注册</button>
        </form>
    </div>

</div>

<script th:inline="javascript">
    /*<![CDATA[*/
        toastr.options = {
            "positionClass": "toast-center-center"
        };
        var errorMsg = [[${errorMsg}]];
        if(errorMsg) {
            toastr.warning(errorMsg, "温馨提示");
        }

        function checkUser(param) {
            $.ajax({
                type:'get',
                url:[[@{/checkUser}]],
                data: param,
                success:function(data){
                    if(data){
                        var obj = JSON.parse(data);
                        toastr.warning(param.checkText + obj.message, "温馨提示");
                    }
                }
            });
        }

        var userIdReg = /^[0-9A-Za-z]{4,20}$/;
        $('#userId').blur(function(e){
            var val = e.currentTarget.value;
            if(!userIdReg.test(val)){
                toastr.warning("用户名必须为英文或者英文加数字!", "温馨提示");
                return;
            }
            checkUser({ checkUser: val, checkText: '用户名' });
        });
        var phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/;
        $('#phone').blur(function(e){
            var val = e.currentTarget.value;
            if(!phoneReg.test(val)){
                toastr.warning("手机号码格式不正确, 请重新输入!", "温馨提示");
                return;
            }
            checkUser({ checkUser: val, checkText: '手机号码' });
        });

        var reg = /^[0-9]{6}$/;
        $('#loginPassword').blur(function(e){
            var val = e.currentTarget.value;
            if(!reg.test(val)){
                toastr.warning("请输入6位数字登录密码!", "温馨提示");
                return;
            }
        });
        $('#reLoginPassword').blur(function (e) {
            var val = e.currentTarget.value,
                loginPwd = $('#loginPassword').val();
            if(val != loginPwd){
                toastr.warning("确认登录密码不一致, 请重新输入!", "温馨提示");
                return;
            }

        });

    /*]]>*/
</script>
</body>
</html>